<template>
  <div>
    <div class="pad-l-20 pad-r-20 pad-t-15 bg-color-white">
      <div>
        <el-button @click="handleAddOrEdit" class="open-btn" type="primary">新建定向计划</el-button>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate-default mar-t-20">
        <div class="search-item">
          <label class="font-14">计划名称：</label>
          <el-input @keyup.enter.native="handleSearch" v-model="searchListQuery.planName" placeholder="请输入关键词"
            style="width: 200px"></el-input>
          <label class="font-14 mar-l-20">创建时间：</label>
          <el-date-picker v-model="datePicker" type="datetimerange" range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
          </el-date-picker>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetClick">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!--tab状态 -->
      <div class="tabs-box mar-b-15 mar-t-15">
        <el-tabs type="card" v-model="status" @tab-click="applyStatusCilck">
          <el-tab-pane :label="allName" name="0"></el-tab-pane>
          <el-tab-pane :label="releasedName" name="1"></el-tab-pane>
          <el-tab-pane :label="onGoingName" name="2"></el-tab-pane>
          <el-tab-pane :label="stoppedName" name="3"></el-tab-pane>
        </el-tabs>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="dataList" @selection-change="handleSelectionChange" v-loading="listLoading"
          element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
          row-class-name="default-row">
          <el-table-column width="400px" label="计划名称" fixed="left">
            <template slot-scope="scope">
              {{ scope.row.planName }}
            </template>
          </el-table-column>
          <el-table-column min-width="200px" label="创建时间" prop="createTime">
          </el-table-column>
          <el-table-column min-width="150px" label="商品数" align="center" prop="goodsNum">
            <template slot-scope="scope">
              {{ scope.row.goodsNum }}
            </template>
          </el-table-column>
          <el-table-column min-width="150px" label="一级合伙人数" align="center" prop="onePartnerNum">
            <template slot-scope="scope">
              {{ scope.row.onePartnerNum }}
            </template>
          </el-table-column>
          <el-table-column min-width="150px" label="计划状态" align="center" prop="status">
            <template slot-scope="scope">
              <span>{{ dict.status[scope.row.status] }}</span>
            </template>
          </el-table-column>
          <el-table-column min-width="180px" label="操作" align="right" fixed="right">
            <template slot-scope="scope">
              <template v-if="scope.row.status === 1">
                <el-popconfirm title="确定要发布吗？" @onConfirm="updateStatus(scope.row, 2)">
                  <el-button type="text" size="medium" slot="reference">发布</el-button>
                  </el-button>
                </el-popconfirm>
                <el-button type="text" size="medium" @click="handleAddOrEdit(scope.row)">编辑
                </el-button>
              </template>
              <template v-if="scope.row.status === 2">
                <el-popconfirm title="确定要停止吗？" @onConfirm="updateStatus(scope.row, 3)">
                  <el-button type="text" size="medium" slot="reference">停止</el-button>
                </el-popconfirm>
              </template>
              <el-button type="text" size="medium" @click="handleDetail(scope.row)">详情</el-button>
              <el-popconfirm title="确定要复制吗？" @onConfirm="handCopy(scope.row)">
                <el-button type="text" size="medium" slot="reference">复制</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <pagination v-show="total>0" :total="total" :page.sync="searchListQuery.currentPage"
        :limit.sync="searchListQuery.size" @pagination="init" />

    </div>
  </div>
</template>

<script>
  import {
    pagePlanManagement,
    countPlanManagement,
    updatePlanManagementStatus,
    copyPlanManagement
  } from '@/api/user/enterprisePlanManagement'

  export default {
    data() {
      return {
        total: 0,
        datePicker: [],
        multipleSelection: [],
        listLoading: false,
        searchListQuery: {
          currentPage: 1,
          size: 10,
          planName: ''
        },
        dataList: [],
        releasedName: '待发布(0)',
        onGoingName: '进行中(0)',
        stoppedName: '已停止(0)',
        allName: '全部(0)',
        dict: {},
        status: '0'
      }
    },
    // 初始化页面
    created() {
      this.init()
    },
    filters: {
      priceFilter(e) {
        return e.toFixed(2)
      }
    },
    mounted() {},
    methods: {
      applyStatusCilck() {
        this.handleSearch()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      initCount() {
        var countQuery = {}
        Object.assign(countQuery, this.searchListQuery)
        countQuery.status = ''
        countPlanManagement(countQuery).then((response) => {
          if (response.isError) return
          this.releasedName = '待发布(' + response.data.releasedNum + ')'
          this.onGoingName = '进行中(' + response.data.onGoingNum + ')'
          this.stoppedName = '已停止(' + response.data.stoppedNum + ')'
          const allNum =
            response.data.releasedNum +
            response.data.onGoingNum +
            response.data.stoppedNum
          this.allName = '全部(' + allNum + ')'
        })
      },
      init() {
        this.listLoading = true
        // 搜索状态
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.searchListQuery.startDate = this.datePicker ? this.datePicker[0] : ''
        this.searchListQuery.endDate = this.datePicker ? this.datePicker[1] : ''
        this.initCount()
        this.searchListQuery.status = this.status
        pagePlanManagement(this.searchListQuery).then((response) => {
          this.listLoading = false
          if (response.isError) return
          this.total = response.data.total
          this.dict = response.data.dict
          this.dataList = response.data.records
        })
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.init()
      },
      resetClick() {
        const originData = this.$options.data()
        this.searchListQuery = originData.searchListQuery
        this.datePicker = []
        this.init()
      },
      handCopy(row) {
        copyPlanManagement({
          planId: row.planId
        }).then((response) => {
          if (response.isError) return
          this.init()
        })
      },
      // 更新状态
      updateStatus(row, status) {
        const params = {
          planId: row.planId,
          status: status
        }
        updatePlanManagementStatus(params).then((response) => {
          if (response.isError) return
          this.init()
        })
      },
      // 添加或编辑
      handleAddOrEdit(row) {
        var planId = ''
        if (row && row.planId) {
          planId = row.planId
        }
        this.$router.push({
          path: '/live/plan-management/edit/index',
          query: {
            planId: planId
          }
        })
      },
      // 详情
      handleDetail(row) {
        this.$router.push({
          path: '/live/plan-management/detail/index',
          query: {
            planId: row.planId
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .table-container {
    /deep/ .el-table thead {
      color: #000 !important;
      font-weight: 500 !important;
    }
  }
</style>
